<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>x-admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/xadmin/lib/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <!--主体内容 start-->
        <div class="layui-row">
            <div class="layui-col-md12">
                <div id="bar" style="width: 100%;height:400px;" ></div>
            </div>
        </div>
    </div>
</div>
<script src="/static/xadmin/lib/layui/jquery-3.2.1.min.js"></script>
<script src="/static/xadmin/lib/layui/echarts.min.js"></script>
<script src="/static/xadmin/lib/layui/layui.js"></script>

<script>
    layui.config({
        base: '/static/xadmin/' //静态资源所在路径
    });
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
    });

    $(function () {
      get_show()
    });

    function get_show(v) {
        var piemyChart = [];
        $.post('{:url("admin/statement/user_analysis")}', {
        }, function(data) {
            if(data.code==1) {
                var list = data.data;
                var Tys = new Array();
                var Dat = new Array();
                for (var i = 0; i < list.length; i++) {
                    Tys.push(list[i].name);
                    Dat.push({
                        'value': list[i].num,
                        'name': list[i].name
                    });
                }
                // 基于准备好的dom，初始化echarts实例
                piemyChart = echarts.init(document.getElementById('bar'));

                // 指定图表的配置项和数据
                option = {
                    color: ['#0fb9b1', '#fc5c65', '#fd9644', '#a55eea','#FF5809'],
                    title: {
                        text: '会员操作系统分析',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        data: Tys,
                        bottom: 10,
                        left: 'center',
                    },
                    series: [{
                        name: '系统名称',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: Dat,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };

                // 1、清除画布
                piemyChart.clear()
                // 2、调用setOption
                piemyChart.setOption(option)
                ///3、在渲染点击事件之前先清除点击事件
                piemyChart.off('click')
                // triggerEvent为true时，触发点击事件
                // 使用刚指定的配置项和数据显示图表。
                piemyChart.setOption(option);
                //饼图点击事件
                piemyChart.on('click', function(params) {
                    var t=params.name;
                });

            }
        });

    }

</script>
</body>
</html>